<%@ page pageEncoding="utf-8" import="java.util.*" %>
<%@ page import="com.listener.pojo.Pokemon" %>
<html>
<head>
    <jsp:include page="head.jsp">
        <jsp:param name="title" value=""/>
    </jsp:include>
    <script src="<%=request.getContextPath()%>/web/js/competencyMap.js"></script>
    <style>
        body{
            background-color: #4f5474;
        }
        #pokemonName{
            opacity: 0.8;
            transition: 0.3s;
        }
        #pokemonName *{
            color: white;
        }
        .pokemonBackgroundDiv{
            position: absolute;
            z-index:-1;
            opacity: 0.4;
            width: 100%;
            height: 100%;
            border-radius:50%;
        }
        .pokemonTable table{
            border-radius: 10px;
            width: 80%;
            margin-top: 5px;
            margin-bottom: 5px;
        }
        pokemonTable a{
            color: white;
        }
        .pokemonTable th{
            text-align: center;color:white;font-size: 25px;
        }
        .pokemonTable td{
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #ffffff;
            width: 90%;
            left: 5%;
            border-radius: 5px;
            margin-bottom:3px;
            position: relative;
        }

        .thirdDiv{
            height: 450px;
        }
        .moveDiv{
            margin-top: 5px;
            border-radius: 10px;
            height: 450px;
            overflow-x:hidden;
            overflow-y: scroll;
        }
        .moveDiv h2{
            color:white;
        }
        .moveTable table{
            margin-bottom: 10px;
            width: 80%;
        }
        .moveTable th{
            border: solid 2px white;
            text-align: center;color:white;font-size: 25px;
        }
        .moveTable td{
            border: solid 2px white;
            text-align: center;
            color:white;
            margin-bottom:3px;
            position: relative;
        }
        .moveTable a{
            color:white;
        }
        .toggleThirdDiv{
            background-color: rgb(99, 107, 162);
            border-radius: 8%;
            border: none;
            margin: 10px;
            font-size: 30px;
        }
        .toggleThirdDiv:hover{
            border: solid 1px black;
            background-color: rgb(56, 60, 86);
        }
    </style>
</head>
<body>

<jsp:include page="/web/nav.jsp">
    <jsp:param name="fun" value="pokemon"/>
</jsp:include>
</body>
<%

    List<Map<String,Object>> typeDefenses=
        (List<Map<String,Object>>) request.getAttribute("typeDefense");
    Map<String,String> typeColors= (Map<String, String>) session.getAttribute("typeColors");
    Pokemon pokemon= (Pokemon) request.getAttribute("detailOfPokemon");
    if(pokemon!=null) {
        %>
<div class="container-fluid row" align="center">
    <div class="col-md-4" style="margin:0;padding:0">
            <div class="pokemonBackgroundDiv"
                 style="background-color: <%=typeColors.get(pokemon.getType())%>"></div>
            <img src="<%=request.getContextPath()%>/<%=pokemon.getPicture()%>"
                 class="rounded" alt="<%=pokemon.getPokemon()%>" width="400">
            <div id="pokemonName" style="background-color: <%=typeColors.get(pokemon.getType())%>">
            <a title="前往wiki查看关于【<%=pokemon.getPokemon()%>】的更多事情" href="<%=pokemon.getWikiUrl()%>"> <h1>
                    <%=pokemon.getPokemon()%></h1></a></div>
    </div>
    <div class="col-md-4">
        <div class="pokemonTable">
            <table align="center" style="background-color: <%=typeColors.get(pokemon.getType())%>">
                <tr>
                    <th>属性</th>
                </tr>
                <tr>
                    <td>
                        <img src="<%=request.getContextPath()%>/img/type/<%=pokemon.getType()%>.png"
                             width="40%">
                        <%
                            if(pokemon.getType1() !=null){
                        %>
                        <img src="<%=request.getContextPath()%>/img/type/<%=pokemon.getType1()%>.png"
                             width="40%">
                        <%
                            }
                        %>
                    </td>
                </tr>
            </table>
        <table align="center" style="background-color: <%=typeColors.get(pokemon.getType())%>">
            <tr>
                <th>特性</th>
            </tr>
            <tr>
                <td>
                    <a href="<%=request.getContextPath()%>/selectAbilityPage?ability=<%=pokemon.getAbility()%>">
                        <%=pokemon.getAbility()%></a>
                    <%
                        if(pokemon.getAbility1()!=null){
                    %>
                    &nbsp;或&nbsp;<a href="<%=request.getContextPath()%>/selectAbilityPage?ability=<%=pokemon.getAbility1()%>">
                    <%=pokemon.getAbility1()%></a></td>
                    <%
                        }
                    %>
            </tr>
        </table>
            <%
                if(pokemon.getHiddenAbility()!=null)
                {
            %>
        <table align="center" style="background-color: <%=typeColors.get(pokemon.getType())%>">
            <tr>
                <th>隐藏特性</th>
            </tr>
            <tr>
                <td><a href="<%=request.getContextPath()%>/selectAbilityPage?ability=<%=pokemon.getHiddenAbility()%>">
                    <%=pokemon.getHiddenAbility()%></a></td>
            </tr>
        </table>
            <%
                }
            %>
            <table align="center" style="background-color: <%=typeColors.get(pokemon.getType())%>">
            <tr>
                <th title="该宝可梦被招式攻击时的受伤倍率">属性相性</th>
            </tr>
            <tr>
                <%
                    for(int i=0;i<typeDefenses.size();i+=2) {
                        Map<String,Object> typeDefense = typeDefenses.get(i);
                %>
                <td>
                    <img src="<%=request.getContextPath()%>/img/type/<%=typeDefense.get("type")%>.png"
                    width="30%"><strong>×<%=typeDefense.get("effect")%>倍</strong>
                    <%
                        if(i+1!=typeDefense.size()){
                            typeDefense = typeDefenses.get(i+1);
                    %>
                    &nbsp;
                    <img src="<%=request.getContextPath()%>/img/type/<%=typeDefense.get("type")%>.png"
                         width="30%"><strong>×<%=typeDefense.get("effect")%>倍</strong>
                    <%
                        }
                    %>
                </td>
                <%
                    }
                %>
            </tr>
        </table>
        </div>

    </div>
    <div class="col-md-4 thirdDiv" >
        <!--定义画布容器-->
        <canvas title="点击可以放大或恢复能力图大小" id="myCanvas" width="400" height="400" onclick="switchMode()">
        </canvas>
        <h1 style="background-color:white;opacity: 0.4;">能力值总和:<%=pokemon.getHp()+pokemon.getAttack()
                +pokemon.getDefense()+pokemon.getSpecialAttack()+
                pokemon.getSpecialDefense()+pokemon.getSpeed()%></h1>
        <button class="toggleThirdDiv">查看可学招式</button>
        <script>
            function switchMode() {
                MRScoreMax();
                competencyMapShow();
            }
            setScoreArray(
                [{
                    "type":"生命",
                    "score": <%=pokemon.getHp()%>
                }, {
                    "type":"攻击",
                    "score": <%=pokemon.getAttack()%>
                }, {
                    "type":"防御",
                    "score": <%=pokemon.getDefense()%>
                }, {
                    "type":"速度",
                    "score": <%=pokemon.getSpeed()%>
                }, {
                    "type":"特防",
                    "score": <%=pokemon.getSpecialDefense()%>
                }, {
                    "type":"特攻",
                    "score": <%=pokemon.getSpecialAttack()%>
                }, ]
            );
            setMapRadius(120)
            setCanvasElement("#myCanvas");
            competencyMapShow();
        </script>
    </div>
    <div class="col-md-4 thirdDiv" style="display: none">
        <div class="moveDiv" style="background-color: <%=typeColors.get(pokemon.getType())%>">
            <div class="moveTable">
                <table align="center" >
                    <h2>可学招式</h2>
                    <tbody>
                    <tr>
                        <th>等级</th>
                        <th>招式名</th>
                        <th>招式详情页</th>
                    </tr>
                    <%
                        List<Map<String, Object>> pokemonMoves= (List<Map<String, Object>>) request.getAttribute("pokemonMove");
                        for (Map<String, Object> pokemonMove : pokemonMoves) {
                    %>
                    <tr>
                        <td>
                            <%=pokemonMove.get("level")%></td>
                        </td>
                        <td><%=pokemonMove.get("move")%></td>
                        <td>
                            <a href="<%=request.getContextPath()%>/selectMovePage?move=<%=pokemonMove.get("move")%>">
                                <%=pokemonMove.get("move")%>-详情页
                            </a>
                        </td>
                    </tr>
                    <%
                        }
                    %>
                    </tbody>
                </table>
            </div>
        </div>
        <button class="toggleThirdDiv">查看能力图</button>
    </div>
</div>

    <script>
        $().ready(function(){
            $(".toggleThirdDiv").click(function(){
                $(".thirdDiv").each(function(){
                        if($(this).css("display")!="none"){
                            $(this).css("display","none")
                        }else{
                            $(this).css("display","block")
                        }
                    }
                );
            });
           $("#pokemonName").hover(function(){
               $(this).css("opacity",1);
           },function(){
               $(this).css("opacity",0.8);
           })
        });
    </script>
    <%
    }
%>
</html>
